<template>
  <view class="container">
    <view class="box">
      <!--头部 -->
      <view class="header" :style="{ height: headerheight + 'px', 'padding-top': paddingtop + 'px' }">
        <uni-icons @click="goback" type="left" size="20" color="#fff" style="padding: 24rpx; margin-right: 240rpx"></uni-icons>
        <view style="font-weight: bold; font-size: 36rpx; color: #ffffff">邀请有礼</view>
      </view>
      <!-- 背景图 -->
      <image src="../../static/mine/invitebgc.png" style="width: 750rpx; height: 2500rpx" mode=""></image>
      <!-- 活动规则 -->
      <view class="rules" @click="goactiverules">活动规则</view>
      <!-- 面对面扫码 -->
      <view class="scancode" @click="$refs.code.open()">面对面扫码</view>
      <!--累计奖励 -->
      <view class="sum">我的累计奖励</view>
      <!-- 累计现金 -->
      <view class="summoney">
        <view>
          <view style="text-align: center; font-weight: bold; font-size: 34rpx; color: #222222">
            <text>￥</text>
            <text>{{ obj.money }}</text>
          </view>
          <view style="text-align: center; font-weight: 500; font-size: 28rpx; color: #222222">累计现金</view>
        </view>
        <view style="text-align: center; font-weight: bold; font-size: 34rpx; color: #222222">
          <view>
            <text>￥</text>
            <text>{{ obj.coupon_price }}</text>
          </view>
          <view style="text-align: center; font-weight: 500; font-size: 28rpx; color: #222222">累计券面值</view>
        </view>
      </view>
      <!-- 累计人数 -->
      <view class="sumpeople">
        <view>
          <view style="text-align: center; font-weight: bold; font-size: 34rpx; color: #222222">
            <text>{{ obj.count }}</text>
            <text>人</text>
          </view>
          <view style="text-align: center; font-weight: 500; font-size: 28rpx; color: #222222">邀请待完成</view>
        </view>
        <view>
          <view style="text-align: center; font-weight: bold; font-size: 34rpx; color: #222222">
            <text>{{ obj.count_suc }}</text>
            <text>人</text>
          </view>
          <view style="text-align: center; font-weight: 500; font-size: 28rpx; color: #222222">邀请已完成</view>
        </view>
      </view>
    </view>
    <!-- 弹框 -->
    <uni-popup ref="code" type="center">
      <view class="codebox">
        <view class="head">
          <view></view>
          <view style="font-weight: bold; font-size: 32rpx; color: #222222">扫码领取大礼包</view>
          <uni-icons type="close" size="30" @click="$refs.code.close()"></uni-icons>
        </view>
        <view class="img">
          <image :src="'https://huydj.dev.jiangkukeji.cn' + qrcode" style="width: 286rpx; height: 282rpx; margin-top: 20rpx" mode=""></image>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      headerheight: '', // 顶部的高度
      paddingtop: '', // 内边距的高度
      qrcode: '',
      imgurl: '',
      obj: {}
    };
  },
  methods: {
    // 获取邀请奖励
    async getdata() {
      const res = await this.http('/user/userSupport');
      console.log('邀请奖励', res);
      this.obj = res.data;
    },
    // 获取二维码
    async getqrcode() {
      const res = await this.http('/user/qrcodeUser');
      console.log('二维码', res.data.mini_qrcode);
      this.qrcode = res.data.mini_qrcode;
    },
    // 返回
    goback() {
      uni.navigateBack();
    },
    // 跳转到活动规则
    goactiverules() {
      uni.navigateTo({
        url: '/mine/activerules/activerules'
      });
    }
  },
  onLoad() {
    // 获取奖励
    this.getdata();
    this.getqrcode();
    const app = getApp();
    this.paddingtop = app.globalData.capsule.top; // 胶囊距离顶部的高度
    this.headerheight = (app.globalData.capsule.top - app.globalData.system.statusBarHeight) * 2 + app.globalData.system.statusBarHeight + app.globalData.capsule.height;
  },
  onShow() {}
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .box {
    box-sizing: border-box;
    position: relative;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 2500rpx;
    .header {
      box-sizing: border-box;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
    }
    .rules {
      box-sizing: border-box;
      position: fixed;
      top: 518rpx;
      right: -30rpx;
      width: 158rpx;
      height: 52rpx;
      background: #ffc252;
      text-align: center;
      line-height: 52rpx;
      font-weight: 500;
      font-size: 26rpx;
      color: #dd3429;
      border-radius: 26rpx 26rpx 26rpx 26rpx;
    }
    .scancode {
      position: absolute;
      left: 48rpx;
      top: 1710rpx;
      width: 654rpx;
      height: 90rpx;
      text-align: center;
      line-height: 90rpx;
      background: linear-gradient(#ffb43b 0%, #ffc95e 100%);
      border-radius: 46rpx 46rpx 46rpx 46rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #ec0000;
    }
    .sum {
      position: absolute;
      top: 1850rpx;
      left: 114rpx;
      width: 524rpx;
      height: 90rpx;
      text-align: center;
      line-height: 90rpx;
      font-weight: 500;
      font-size: 34rpx;
      color: #ffffff;
      background: #ff5f05;
      border-radius: 30rpx 30rpx 0rpx 0rpx;
    }
    .summoney {
      position: absolute;
      top: 1940rpx;
      left: 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      width: 666rpx;
      height: 212rpx;
      border: 20rpx solid #fdc685;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
    .sumpeople {
      position: absolute;
      top: 2140rpx;
      left: 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      width: 666rpx;
      height: 212rpx;
      border: 20rpx solid #fdc685;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
  }
  .codebox {
    box-sizing: border-box;
    width: 630rpx;
    height: 532rpx;
    padding: 52rpx 18rpx;
    background: linear-gradient(315deg, #ffffff 0%, #ffc6c1 100%);
    border-radius: 36rpx 36rpx 36rpx 36rpx;
    .head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 32rpx;
    }
    .img {
      box-sizing: border-box;
      width: 338rpx;
      height: 338rpx;
      background: #ffffff;
      margin: 0 126rpx;
      text-align: center;
      margin-top: 20rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
  }
}
</style>
